<template>
  <div>
    <header
      :class="isVisible?'header-navigation slideDown':'header-navigation slideUp'"
      id="header"
    >
      <nav>
        <div class="logo">
          <router-link to="/">
            <a href="javascript:void(0);" v-if="info.name">{{info.name}}</a>
          </router-link>
        </div>

        <h2 id="mnavh" @click="openHead" :class="showHead?'open':''">
          <span class="navicon"></span>
        </h2>

        <ul id="starlist" :style="showHead?'display: block':''">

          <li v-for="webNavbar in webNavbarList" :key="webNavbar.uid">

            <!--判断是否有下拉菜单-->
            <span  v-if="webNavbar.childWebNavbar && webNavbar.childWebNavbar.length > 0">
              <el-dropdown  trigger="click">
              <span class="el-dropdown-link">
                {{webNavbar.name}}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :key="index" v-for="(childWebNavbar, index)  in webNavbar.childWebNavbar">
                  <router-link :to="childWebNavbar.url" v-if="childWebNavbar.isJumpExternalUrl == 0">
                    <a href="javascript:void(0);" @click="openHead">{{ childWebNavbar.name }}</a>
                  </router-link>
                  <a v-if="childWebNavbar.isJumpExternalUrl == 1" :href="childWebNavbar.url" target="_blank">{{ childWebNavbar.name }}</a>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            </span>
            <!--没有有下拉菜单-->
            <span v-else>
              <router-link :to="webNavbar.url" v-if="webNavbar.isJumpExternalUrl == 0">
              <a href="javascript:void(0);" @click="openHead" :class="[saveTitle == webNavbar.url ? 'title' : '']">{{ webNavbar.name }}</a>
              </router-link>
              <a v-if="webNavbar.isJumpExternalUrl == 1" :href="webNavbar.url" target="_blank" :class="[saveTitle == webNavbar.url ? 'title' : '']">{{ webNavbar.name }}</a>
            </span>
          </li>

          <!--        <li>-->
          <!--          <router-link to="/">-->
          <!--            <a href="javascript:void(0);" :class="[saveTitle == '/' ? 'title' : '']">首页</a>-->
          <!--          </router-link>-->
          <!--        </li>-->

          <!--        <li>-->
          <!--          <router-link to="/about">-->
          <!--            <a href="javascript:void(0);" :class="[saveTitle == '/about' ? 'title' : '']">关于我</a>-->
          <!--          </router-link>-->
          <!--        </li>-->

          <!--        <li>-->
          <!--          <router-link to="/sort">-->
          <!--            <a href="javascript:void(0);" :class="[saveTitle == '/sort' ? 'title' : '']">归档</a>-->
          <!--          </router-link>-->
          <!--        </li>-->

          <!--        <li>-->
          <!--          <router-link to="/classify">-->
          <!--            <a href="javascript:void(0);" :class="[saveTitle == '/classify' ? 'title' : '']">分类</a>-->
          <!--          </router-link>-->
          <!--        </li>-->

          <!--        <li>-->
          <!--          <router-link to="/tag">-->
          <!--            <a href="javascript:void(0);" :class="[saveTitle == '/tag' ? 'title' : '']">标签</a>-->
          <!--          </router-link>-->
          <!--        </li>-->

          <!--        <li>-->
          <!--          <router-link to="/subject">-->
          <!--            <a href="javascript:void(0);" :class="[saveTitle == '/subject' ? 'title' : '']">专题</a>-->
          <!--          </router-link>-->
          <!--        </li>-->

          <!--        <li>-->
          <!--          <router-link to="/share">-->
          <!--            <a href="javascript:void(0);" :class="[saveTitle == '/share' ? 'title' : '']">学习教程</a>-->
          <!--          </router-link>-->
          <!--        </li>-->

          <!--        <li>-->
          <!--          <router-link to="/time">-->
          <!--            <a href="javascript:void(0);" :class="[saveTitle == '/time' ? 'title' : '']">时间轴</a>-->
          <!--          </router-link>-->
          <!--        </li>-->

          <!--        <li v-if="openComment=='1'">-->
          <!--          <router-link to="/messageBoard">-->
          <!--            <a href="javascript:void(0);" :class="[saveTitle == '/messageBoard' ? 'title' : '']">留言板</a>-->
          <!--          </router-link>-->
          <!--        </li>-->

        </ul>

        <div class="searchbox">
          <div id="search_bar" :class="(showSearch || keyword.length > 0)?'search_bar search_open':'search_bar'">
            <input
              ref="searchInput"
              class="input"
              placeholder="想搜点什么呢.."
              type="text"
              name="keyboard"
              v-model="keyword"
              v-on:keyup.enter="search"
            >
            <p class="search_ico" @click="clickSearchIco" :style="(browserFlag == 1)?'':'top:17px'">
              <span></span>
            </p>
          </div>
        </div>

        <el-dropdown @command="handleCommand" class="userInfoAvatar">

          <span class="el-dropdown-link" >
            <el-badge  :value="userReceiveCommentCount"  class="item" :hidden="!isLogin || userReceiveCommentCount == 0">
              <img v-if="!isLogin" src="../../static/images/defaultAvatar.png">
              <img v-if="isLogin&&userInfo.photoUrl!=undefined" :src="userInfo.photoUrl" onerror="onerror=null;src=defaultAvatar">
              <img v-if="isLogin&&userInfo.photoUrl==undefined"
                   :src="defaultAvatar">
            </el-badge>
          </span>

          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="login" v-show="!isLogin">登录</el-dropdown-item>
            <el-dropdown-item command="goUserInfo" v-show="isLogin">个人中心</el-dropdown-item>
            <el-dropdown-item command="logout" v-show="isLogin">退出登录</el-dropdown-item>
          </el-dropdown-menu>

        </el-dropdown>


      </nav>
    </header>

    <LoginBox v-if="showLogin" @closeLoginBox="closeLoginBox"></LoginBox>

    <el-drawer
      :show-close="true"
      :visible.sync="drawer"
      :size="drawerSize"
      :with-header="false">

      <el-tabs type="border-card" tab-position="left" v-model="activeName" style="margin-top: 50px; height: 100%;"  @tab-click="handleClick">
        <el-tab-pane label="个人中心" name="0">
          <span slot="label"><i class="el-icon-user-solid"></i> 个人中心</span>
          <el-form label-position="left" :model="userInfo" label-width="100px" :rules="rules" ref="userInfo">
            <el-form-item label="用户头像" :label-width="labelWidth">

              <div class="imgBody" v-if="userInfo.photoUrl">
                <i class="el-icon-error inputClass" v-show="icon" @click="deletePhoto('user')" @mouseover="icon = true"></i>
                <img @mouseover="icon = true" @mouseout="icon = false" v-bind:src="userInfo.photoUrl" />
              </div>

              <div v-else class="uploadImgBody" @click="checkPhoto">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </div>
            </el-form-item>

            <el-form-item label="昵称" :label-width="labelWidth">
              <el-input v-model="userInfo.nickName" style="width: 100%"></el-input>
            </el-form-item>

            <el-form-item label="性别" :label-width="labelWidth">
              <el-radio v-for="gender in genderDictList" :key="gender.uid" v-model="userInfo.gender" :label="gender.dictValue" border size="medium">{{gender.dictLabel}}</el-radio>
            </el-form-item>

            <el-form-item label="生日" :label-width="labelWidth">
              <el-date-picker
                v-model="userInfo.birthday"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>

            <el-form-item label="评论邮件通知" :label-width="labelWidth">
              <el-radio v-for="item in yesNoDictList" :key="item.uid" v-model="userInfo.startEmailNotification" :label="parseInt(item.dictValue)" border size="medium">{{item.dictLabel}}</el-radio>
            </el-form-item>

            <el-form-item label="邮箱" :label-width="labelWidth" prop="email">
              <el-input v-model="userInfo.email" style="width: 100%"></el-input>
            </el-form-item>

            <el-form-item label="QQ号" :label-width="labelWidth" prop="qqNumber">
              <el-input v-model="userInfo.qqNumber" style="width: 100%"></el-input>
            </el-form-item>

            <el-form-item label="职业" :label-width="labelWidth" prop="occupation">
              <el-input v-model="userInfo.occupation" style="width: 100%"></el-input>
            </el-form-item>

            <el-form-item label="简介" :label-width="labelWidth" prop="summary">
              <el-input
                type="textarea"
                :autosize="{ minRows: 5, maxRows: 10}"
                placeholder="请输入内容"
                style="width: 100%"
                v-model="userInfo.summary">
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('editUser')">保 存</el-button>
            </el-form-item>

          </el-form>
        </el-tab-pane>

        <el-tab-pane label="我的评论" name="1">
          <span slot="label"><i class="el-icon-message-solid"></i> 我的评论</span>
          <div style="width: 100%; height: 840px;overflow:auto;">
            <el-timeline>
              <el-timeline-item v-for="comment in commentList" :key="comment.uid" :timestamp="timeAgo(comment.createTime)" placement="top">
                <el-card>
                  <div class="commentList">
                  <span class="left p1">
                    <img v-if="comment.user" :src="comment.user.photoUrl ? comment.user.photoUrl:defaultAvatar" onerror="onerror=null;src=defaultAvatar" />
                    <img v-else :src="defaultAvatar" />
                  </span>

                    <span class="right p1">
                    <div class="rightTop">
                      <el-link class="userName" :underline="false">{{comment.user.nickName}}</el-link>
                      <el-tag style="cursor: pointer;"  @click.native="goSource(comment)">{{comment.sourceName}}</el-tag>
                    </div>

                    <div class="rightCenter ck-content" v-highlight v-html="$xss(comment.content, options)"></div>
                  </span>
                  </div>
                </el-card>
              </el-timeline-item>

              <el-timeline-item v-if="commentList.length == 0" placement="top">
                <el-card>
                  <span style="font-size: 16px">空空如也~</span>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-tab-pane>

        <el-tab-pane label="我的回复" name="2">
          <span slot="label">
            <el-badge  :value="userReceiveCommentCount"  class="item" :hidden="!isLogin || userReceiveCommentCount == 0">
              <i class="el-icon-s-promotion"></i> 我的回复
            </el-badge>
          </span>
          <div style="width: 100%; height: 840px;overflow:auto">
            <el-timeline>
              <el-timeline-item v-for="reply in replyList" :key="reply.uid" :timestamp="timeAgo(reply.createTime)" placement="top">
                <el-card>
                  <div class="commentList">
                    <span class="left p1">
                      <img v-if="reply.user" :src="reply.user.photoUrl ? reply.user.photoUrl:defaultAvatar" onerror="onerror=null;src=defaultAvatar" />
                      <img v-else :src="defaultAvatar" />
                    </span>

                    <span class="right p1">

                        <div class="rightTop">
                          <el-link class="userName" :underline="false">{{reply.user.nickName}}</el-link>
                          <el-tag style="cursor: pointer;"  @click.native="goSource(reply)">{{reply.sourceName}}</el-tag>
                        </div>

                        <div class="rightCenter ck-content" v-highlight v-html="$xss(reply.content, options)">
                        </div>
                    </span>
                  </div>
                </el-card>
              </el-timeline-item>

              <el-timeline-item v-if="replyList.length == 0" placement="top">
                <el-card>
                  <span style="font-size: 16px">空空如也~</span>
                </el-card>
              </el-timeline-item>

            </el-timeline>
          </div>
        </el-tab-pane>
        <el-tab-pane label="我的点赞" name="3">
          <span slot="label"><i class="el-icon-star-on"></i> 我的点赞</span>
          <div style="width: 100%; height: 840px;overflow:auto">
            <el-timeline>
              <el-timeline-item v-for="praise in praiseList" :key="praise.uid" :timestamp="timeAgo(praise.createTime)" placement="top">
                <el-card>
                  <span>点赞</span><el-tag type="warning" style="cursor: pointer" v-if="praise.blog" @click.native="goToInfo(praise.blog.uid)">{{praise.blog.title}}</el-tag>
                </el-card>
              </el-timeline-item>

              <el-timeline-item v-if="praiseList.length == 0" placement="top">
                <el-card>
                  <span style="font-size: 16px">空空如也~</span>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-tab-pane>
        <el-tab-pane label="我的反馈" name="4">
          <span slot="label"><i class="el-icon-phone"></i> 我的反馈</span>

          <el-collapse v-model="activeNames">
            <el-collapse-item title="反馈须知" name="1">
              <div>如果您对本站有什么想法，可以在这里进行反馈</div>
              <div>或者加入我们的QQ群进行交流</div>
            </el-collapse-item>
          </el-collapse>
          <el-divider></el-divider>

          <div style="width: 100%; height: 450px;overflow:auto">
            <el-timeline>
              <el-timeline-item v-for="feedbackItem in feedbackList" :key="feedbackItem.uid" :timestamp="timeAgo(feedbackItem.createTime)" placement="top">
                <el-card class="feedbackCard">
                  <div class="item">
                    <span class="title">
                      标题:
                    </span>
                    <span class="content">
                      {{feedbackItem.title}}
                    </span>
                  </div>

                  <div class="item">
                    <span class="title">
                      内容:
                    </span>
                    <span class="content">
                      {{feedbackItem.content}}
                    </span>
                  </div>

                  <div class="item">
                    <span class="title">
                      反馈状态:
                    </span>
                    <span class="content">
                      <el-tag v-for="item in feedbackDictList" :key="item.uid" :type="item.listClass" v-if="feedbackItem.feedbackStatus == item.dictValue">{{item.dictLabel}}</el-tag>
                    </span>
                  </div>

                  <div class="item">
                    <span class="title">
                      回复:
                    </span>
                    <span class="content">
                      {{feedbackItem.reply}}
                    </span>
                  </div>
                </el-card>
              </el-timeline-item>

              <el-timeline-item v-if="feedbackList.length == 0" placement="top">
                <el-card>
                  <span style="font-size: 16px">空空如也~</span>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>

          <el-divider></el-divider>

          <el-form label-position="left" :model="userInfo" label-width="100px">
            <el-form-item label="标题" :label-width="labelWidth">
              <el-input v-model="feedback.title" style="width: 100%"></el-input>
            </el-form-item>

            <el-form-item label="内容" :label-width="labelWidth">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入反馈内容"
                v-model="feedback.content">
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('feedback')">提 交</el-button>
            </el-form-item>
          </el-form>

        </el-tab-pane>
        <el-tab-pane label="申请友链" name="5">
          <span slot="label"><i class="el-icon-share"></i> 申请友链</span>

          <el-form label-position="left" :model="blogLink" label-width="100px" ref="blogLink" :rules="linkRules">
            <el-collapse v-model="activeNames">
              <el-collapse-item title="友链申请需知" name="1">
                <span v-html="info.linkApplyTemplate">{{info.linkApplyTemplate}}</span>
              </el-collapse-item>
            </el-collapse>

            <el-divider></el-divider>

            <el-form-item label="网站图标">
              <div class="imgBody" v-if="blogLink.photoList">
                <i class="el-icon-error inputClass" v-show="icon" @click="deletePhoto('link')" @mouseover="icon = true"></i>
                <img @mouseover="icon = true" @mouseout="icon = false" v-bind:src="blogLink.photoList[0]" />
              </div>

              <div v-else class="uploadImgBody" @click="checkPhoto">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </div>
            </el-form-item>

            <el-form-item label="网站名称" :label-width="labelWidth" prop="title">
              <el-input v-model="blogLink.title" style="width: 100%"></el-input>
            </el-form-item>

            <el-form-item label="网站简介" :label-width="labelWidth" prop="summary">
              <el-input v-model="blogLink.summary" style="width: 100%"></el-input>
            </el-form-item>

            <el-form-item label="网站地址" :label-width="labelWidth" prop="url">
              <el-input v-model="blogLink.url" style="width: 100%"></el-input>
            </el-form-item>

            <el-form-item label="站长邮箱" :label-width="labelWidth" prop="email">
              <el-input v-model="blogLink.email" placeholder="用于申请通过邮件通知" style="width: 100%"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('replyBlogLink')">申 请</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="修改密码" name="6">
          <span slot="label"><i class="el-icon-s-tools"></i> 修改密码</span>
          <el-collapse v-model="activeNames">
            <el-collapse-item title="修改密码须知" name="1">
              <div>此修改密码功能仅适用于账号和密码登录</div>
              <div>对于第三方登录的账号，无法进行密码修改</div>
            </el-collapse-item>
          </el-collapse>
          <el-form ref="userInfoForm" label-position="left" :model="userInfo" label-width="100px" :rules="userInfoRules">
            <el-form-item label="旧密码" :label-width="labelWidth" prop="oldPwd">
              <el-input type="password" v-model="userInfo.oldPwd" style="width: 100%"></el-input>
            </el-form-item>

            <el-form-item label="新密码" :label-width="labelWidth" prop="newPwd">
              <el-input type="password" v-model="userInfo.newPwd" style="width: 100%"></el-input>
            </el-form-item>

            <el-form-item label="重复密码" :label-width="labelWidth" prop="newPwd2">
              <el-input type="password" v-model="userInfo.newPwd2" style="width: 100%"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('changePwd')">提 交</el-button>
            </el-form-item>
          </el-form>

        </el-tab-pane>
      </el-tabs>
    </el-drawer>

    <!--头像裁剪-->
    <avatar-cropper
      v-show="imagecropperShow"
      :key="imagecropperKey"
      :width="300"
      :height="300"
      :url="url"
      lang-type="zh"
      @close="close"
      @crop-upload-success="cropSuccess"
    />

    <div>
      <router-view/>
    </div>

    <footer>
      <p>
        Copyright <a href="https://gitee.com/moxi159753/mogu_blog_v2" @click="goIndex()"> &nbsp;蘑菇博客&nbsp;</a>
        <a href="https://beian.miit.gov.cn/">{{info.recordNum}}</a>
      </p>
    </footer>

    <div>
      <a
        href="javascript:void(0);"
        @click="returnTop"
        :class="isCdTopVisible?'cd-top cd-is-visible':'cd-top'"
      >Top</a>
    </div>
  </div>

</template>

<script>
import AvatarCropper from '@/components/AvatarCropper'
import {getWebConfig, getWebNavbar} from "../api/index";
import {delCookie, getCookie, setCookie} from "@/utils/cookieUtils";
import {authVerify, editUser, updateUserPwd, replyBlogLink, deleteUserAccessToken, getFeedbackList, addFeedback} from "../api/user";
import {getCommentListByUser, getPraiseListByUser, getUserReceiveCommentCount, readUserReceiveCommentCount} from "../api/comment";
import LoginBox from "../components/LoginBox";
import {getListByDictTypeList} from "@/api/sysDictData"
// vuex中有mapState方法，相当于我们能够使用它的getset方法
import {mapMutations} from 'vuex';
import {timeAgo} from "../utils/webUtils";
import {getSearchModel} from "@/api/search";

export default {
  name: "index",
  components: {
    LoginBox,
    AvatarCropper
  },
  data() {
    return {
      // xss白名单配置
      options : {
        whiteList: {
          a: ['href', 'title', 'target'],
          span: ['class'],
          h1: ['class'],
          h2: ['class'],
          h3: ['class'],
          h4: ['class'],
          pre: [],
          code: ['class'],
          p: ['class']
        }
      },
      searchModel: 0, //搜索模式 0:SQL搜索、1:ES搜索、2:Solr搜索
      activeNames: ['1'], //激活的折叠面板
      activeName: "0", // 激活的标签
      yesNoDictList: [], // 是否 字典列表
      genderDictList: [], //性别 字典列表
      feedbackDictList: [], // 反馈 字典列表
      imagecropperShow: false,
      imagecropperKey: 0,
      url: process.env.PICTURE_API + "/file/cropperPicture",
      webSite: process.env.VUE_MOGU_WEB,
      webNavbarList: [],
      drawer: false,
      info: {},
      saveTitle: "",
      keyword: "",
      showSearch: false, //控制搜索框的弹出
      showHead: false, //控制导航栏的弹出
      isCdTopVisible: false,
      isVisible: true, //控制web端导航的隐藏和显示
      isLogin: false,
      showLogin: false, //显示登录框
      userInfo: { // 用户信息
      },
      feedback: {}, //反馈提交
      blogLink: {}, //友链申请
      icon: false, //控制删除图标的显示
      labelWidth: "100px",
      commentList: [], //我的评论
      replyList: [], //我的回复
      praiseList: [], //我的点赞
      feedbackList: [], //我的反馈
      openComment: "0", //是否开启评论
      defaultAvatar: this.$SysConf.defaultAvatar, // 默认头像
      drawerSize: "30%",
      userReceiveCommentCount: 0, // 用户收到的评论数
      browserFlag: 1, // 浏览器标志【默认Chrome】
      rules: {
        qqNumber: [
          {pattern:  /[1-9]([0-9]{5,11})/, message: '请输入正确的QQ号码'},
        ],
        email: [
          {pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/, message: '请输入正确的邮箱'},
        ],
        summary: [
          {min: 0, max: 200, message: '长度在0到200个字符'},
        ],
      },
      linkRules: {
        title: [
          {required: true, message: '网站名称不能为空', trigger: 'blur'},
          {min: 1, max: 10, message: '长度在1到10个字符'},
        ],
        summary: [
          {required: true, message: '简介不能为空', trigger: 'blur'},
          {min: 1, max: 50, message: '长度在1到50个字符'},
        ],
        url: [
          {required: true, message: '网站地址不能为空', trigger: 'blur'},
          {pattern:  /^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/, message: '请输入有效的URL'},
        ],
        email: [
          {pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/, message: '请输入正确的邮箱'},
        ],
      },
      userInfoRules: {
        oldPwd: [
          {required: true, message: '旧密码不能为空', trigger: 'blur'},
          {min: 5, max: 20, message: '密码长度在5到20个字符'},
        ],
        newPwd: [
          {required: true, message: '新密码不能为空', trigger: 'blur'},
          {min: 5, max: 20, message: '密码长度在5到20个字符'},
        ],
        newPwd2: [
          {required: true, message: '新密码不能为空', trigger: 'blur'},
          {min: 5, max: 20, message: '密码长度在5到20个字符'},
        ]
      }
    };
  },
  metaInfo() {
    return {
      title: this.info.title,
      link: [
        { rel: 'icon', href: this.info.logoPhoto }
      ],
      meta: [
        {
          name: "keywords",
          content: this.info.keyword,
        },
        {
          name: "content",
          content: this.info.summary,
        },
        {
          name: "description",
          content: this.info.summary,
        },
        {
          property: "site_name",
          content: this.info.name,
        },
      ],
    };
  },
  mounted() {
    var that = this;
    var offset = 300;
    var after = 0;
    window.addEventListener("scroll", function () {
      let scrollTop = document.documentElement.scrollTop; //当前的的位置
      let scrollHeight = document.documentElement.scrollHeight; //最高的位置
      if (scrollTop > offset) {
        that.isCdTopVisible = true;
      } else {
        that.isCdTopVisible = false;
      }
      if (scrollTop > after) {
        that.isVisible = false;
      } else {
        that.isVisible = true;
      }
      after = scrollTop;
    });

    // 屏幕自适应
    window.onresize = () => {
      return (() => {
        that.setSize()
      })()
    }
  },
  watch: {
    $route(to, from) {
      this.getCurrentPageTitle()
    },
    // 判断登录状态位是否改变（用于控制弹框）
    '$store.state.app.loginMessage': function (newFlag, oldFlag) {
      this.showLogin = true
    }
  },
  created() {
    // 字典查询
    this.getDictList()
    this.getToken()
    this.getKeyword()
    this.getCurrentPageTitle()
    this.getWebConfigInfo()
    this.getWebNavbarList()
    this.setSize()
    // 获取浏览器类型
    this.getBrowser()
    this.getBlogSearchModel()
  },
  methods: {
    //拿到vuex中的写的方法
    ...mapMutations(['setUserInfo', 'setLoginState', 'setWebConfigData']),
    // 搜索
    search: function () {
      if (this.keyword == "" || this.keyword.trim() == "") {
        this.$notify.error({
          title: '错误',
          message: "关键字不能为空",
          type: 'success',
          offset: 100
        });
        return;
      }
      this.$router.push({path: "/list", query: {keyword: this.keyword, model: this.searchModel}});
    },
    getBlogSearchModel: function () {
      getSearchModel().then(response => {
        console.log("获取搜索模式", response)
        if(response.code == this.$ECode.SUCCESS) {
          this.searchModel = response.data
        }
      })
    },
    setSize() {
      // 屏幕大于950px的时候，显示侧边栏
      let clientWidth = document.body.clientWidth
      if(clientWidth > 1360) {
        this.drawerSize = "30%";
        this.showSearch = true
      }else if(clientWidth < 1360 && clientWidth > 950) {
        this.drawerSize = "50%";
        this.showSearch = true
      } else if(clientWidth < 950 && clientWidth > 650) {
        this.drawerSize = "70%";
        this.showSearch = false
      } else {
        this.drawerSize = "95%";
        this.showSearch = false
      }
    },
    //跳转到文章详情
    goToInfo(uid) {
      let routeData = this.$router.resolve({
        path: "/info",
        query: {blogUid: uid}
      });
      window.open(routeData.href, '_blank');
    },

    // 获取导航栏列表
    getWebNavbarList() {
      let params = {};
      params.isShow = 1
      getWebNavbar(params).then(response => {
        if(response.code == this.$ECode.SUCCESS) {
          let webNavbarList = response.data
          let newWebNavbarList = []
          for(let a=0; a<webNavbarList.length; a++) {
            if(webNavbarList[a].isShow == 1) {
              newWebNavbarList.push(webNavbarList[a])
            }
          }
          this.webNavbarList = newWebNavbarList
          setCookie("webNavbarList", JSON.stringify(webNavbarList), 1)
        }
      })
    },

    // 跳转到资源详情
    goSource: function(comment) {
      let source = comment.source
      switch(source) {
        case "MESSAGE_BOARD": {
          let routeData = this.$router.resolve({
            path: "/messageBoard"
          });
          window.open(routeData.href, '_blank');
        };break;
        case "BLOG_INFO": {
          let routeData = this.$router.resolve({
            path: "/info",
            query: {blogUid: comment.blogUid}
          });
          window.open(routeData.href, '_blank');
        };break;
        case "ABOUT": {
          let routeData = this.$router.resolve({
            path: "/about"
          });
          window.open(routeData.href, '_blank');
        };break;
      }
    },

    // 获取评论列表
    getCommentList: function() {
      let params = {}
      params.pageSize = 10;
      params.currentPage = 1;
      getCommentListByUser(params).then(response => {
        if(response.code == this.$ECode.SUCCESS) {
          this.commentList = response.data.commentList
          this.replyList = response.data.replyList
        }
      })
    },

    // 获取反馈列表
    getFeedback: function() {
      let params = {}
      getFeedbackList(params).then(response => {
        if(response.code == this.$ECode.SUCCESS) {
          this.feedbackList = response.data.records;
        }
      })
    },

    // 获取点赞列表
    getPraiseList: function() {
      let params = {}
      params.pageSize = 10;
      params.currentPage = 1;
      getPraiseListByUser(params).then(response => {
        if(response.code == this.$ECode.SUCCESS) {
          this.praiseList = response.data.records;
        }
      })
    },

    // 标签选择
    handleClick(tab, event) {
      switch(tab.index) {
        case "0": {
          console.log("点击个人中心")
        }; break;
        case "1": {
          console.log("点击我的评论")
        }; break;
        case "2": {
          console.log("点击我的回复")
          // 判断用户是否未读的回复
          if(this.userReceiveCommentCount > 0) {
            // 设置已阅读
            readUserReceiveCommentCount().then(response => {
              if(response.code == this.$ECode.SUCCESS) {
                // 阅读成功
                this.userReceiveCommentCount = 0
              }
            })
          }
        }; break;
        case "3": {
          console.log("点击我的点赞")
        }; break;
        case "4": {
          console.log("点击我的反馈")
        }; break;
        case "5": {
          console.log("点击申请友链")
        }; break;
        case "6": {
          console.log("点击修改密码")
        }; break;
      }
    },

    //弹出选择图片框
    checkPhoto() {
      this.imagecropperShow = true
    },

    /**
     * dateTimeStamp是一个时间毫秒，注意时间戳是秒的形式，在这个毫秒的基础上除以1000，就是十位数的时间戳。13位数的都是时间毫秒。
     * @param dateTimeStamp
     * @returns {string}
     */
    timeAgo(dateTimeStamp) {
      return timeAgo(dateTimeStamp)
    },

    cropSuccess(resData) {
      this.imagecropperShow = false
      this.imagecropperKey = this.imagecropperKey + 1
      // 判断当前激活的页面
      if(this.activeName == "0") {
        // 激活个人中心页面
        this.userInfo.photoUrl = resData[0].url
        this.userInfo.avatar = resData[0].uid
      } else if(this.activeName == "5") {
        let photoList = []
        photoList.push(resData[0].url);
        this.blogLink.photoList = photoList
        this.blogLink.fileUid = resData[0].uid
      }
    },

    deletePhoto: function(type) {
      switch (type) {
        case "user": {
          this.userInfo.photoUrl = null;
          this.userInfo.avatar = "";
          this.icon = false;
        } break;

        case "link": {
          this.blogLink.photoList = null;
          this.icon = false;
        } break;
      }
    },

    close() {
      this.imagecropperShow = false
    },

    submitForm: function(type) {
      switch (type) {
        case "editUser": {
          this.$refs.userInfo.validate((valid) => {
            if(!valid) {
              console.log("校验失败")
            } else {
              editUser(this.userInfo).then(response => {
                if(response.code == this.$ECode.SUCCESS) {
                  this.$message({
                    type: "success",
                    message: response.data
                  })
                } else {
                  this.$message({
                    type: "error",
                    message: response.data
                  })
                }
              });
            }
          })
        }; break;

        case "replyBlogLink": {
          this.$refs.blogLink.validate((valid) => {
            if(!valid) {
              console.log("校验失败")
            } else {
              replyBlogLink(this.blogLink).then(response => {
                if(response.code == this.$ECode.SUCCESS) {
                  this.$message({
                    type: "success",
                    message: response.data
                  })
                } else {
                  this.$message({
                    type: "error",
                    message: response.data
                  })
                }
              });
            }
          })
        } break;

        case "feedback": {
          var feedback = this.feedback
          if(feedback.title == undefined || feedback.title == "" || feedback.content == undefined || feedback.content == "") {
            this.$message({
              type: "error",
              message: "必填项不能为空"
            })
            return;
          }
          addFeedback(this.feedback).then(response => {
            if(response.code == this.$ECode.SUCCESS) {
              this.$message({
                type: "success",
                message: response.data
              })
              this.feedback = {}
              this.getFeedback()
            } else {
              this.$message({
                type: "error",
                message: response.data
              })
            }
          });
        }; break;

        case "changePwd": {
          let newPwd = this.userInfo.newPwd
          let newPwd2 = this.userInfo.newPwd2
          let oldPwd = this.userInfo.oldPwd
          if(newPwd != newPwd2) {
            this.$message({
              type: "error",
              message: "两次密码不一致"
            })
            return
          }
          if(newPwd == oldPwd) {
            this.$message({
              type: "error",
              message: "新旧密码相同"
            })
            return
          }
          let params = new URLSearchParams()
          params.append("oldPwd", oldPwd)
          params.append("newPwd", newPwd)
          updateUserPwd(params).then(response => {
            if(response.code == this.$ECode.SUCCESS) {
              this.$message({
                type: "success",
                message: response.data
              })
            } else {
              this.$message({
                type: "error",
                message: response.data
              })
            }
            // 重置表单
            this.$refs.userInfoForm.resetFields()
          })
        };break;
      }
    },

    /**
     * 字典查询
     */
    getDictList: function () {
      var dictTypeList =  ['sys_yes_no', 'sys_user_sex', 'sys_feedback_status']

      getListByDictTypeList(dictTypeList).then(response => {
        if (response.code == this.$ECode.SUCCESS) {
          var dictMap = response.data;
          this.genderDictList = dictMap.sys_user_sex.list
          this.yesNoDictList = dictMap.sys_yes_no.list
          this.feedbackDictList = dictMap.sys_feedback_status.list
        }
      });
    },

    getToken: function() {
      let token = this.getUrlVars()["token"];
      // 判断url中是否含有token
      if (token != undefined) {
        // 设置token七天过期
        setCookie("token", token, 7)
      } else {
        // 从cookie中获取token
        token = getCookie("token")
      }
      if (token != undefined) {
        authVerify(token).then(response => {
          if (response.code == this.$ECode.SUCCESS) {
            this.isLogin = true;
            this.userInfo = response.data;
            this.setUserInfo(this.userInfo)
            // 获取用户的评论数
            this.setUserReceiveCommentCount()
          } else {
            this.isLogin = false;
            delCookie("token");
          }
          this.setLoginState(this.isLogin);
        });
      } else {
        this.isLogin = false;
        this.setLoginState(this.isLogin);
      }
    },
    setUserReceiveCommentCount: function () {
      getUserReceiveCommentCount().then(response => {
        if (response.code == this.$ECode.SUCCESS) {
          this.userReceiveCommentCount = response.data
        }
      });
    },
    getKeyword: function() {
      var tempValue = decodeURI(this.getUrlVars()["keyword"]);
      if (
        tempValue == null ||
        tempValue == undefined ||
        tempValue == "undefined"
      ) {
      } else {
        this.keyword = tempValue;
      }
    },
    /**
     * 获取当前所在页面的标题
     * @returns {{}}
     */
    getCurrentPageTitle: function() {
      var test = window.location.href;
      var start = 0;
      var end = test.length;
      for (var i = 0; i < test.length; i++) {
        if (test[i] == "#") {
          start = i;
        }
        if (test[i] == "?" && i > start) {
          end = i;
        }
      }
      var result = test.substring(start + 1, end);
      this.saveTitle = result;
    },
    /**
     * 获取网站配置
     */
    getWebConfigInfo: function() {
      let webConfigData = this.$store.state.app.webConfigData
      if(webConfigData.createTime) {
        this.contact = webConfigData;
        this.mailto = "mailto:" + this.contact.email;
        this.openComment = webConfigData.openComment
      } else {
        getWebConfig().then(response => {
          if (response.code == this.$ECode.SUCCESS) {
            this.info = response.data;
            // 存储在Vuex中
            this.setWebConfigData(response.data)
            this.openComment = this.info.openComment
          }
        });
      }
    },
    /**
     * 截取URL中的参数
     * @returns {{}}
     */
    getUrlVars: function () {
      var vars = {};
      var parts = window.location.href.replace(
        /[?&]+([^=&]+)=([^&#]*)/gi,
        function (m, key, value) {
          vars[key] = value;
        }
      );
      return vars;
    },
    clickSearchIco: function () {
      if(this.keyword != "") {
        this.search();
      }
      this.showSearch = !this.showSearch;
      //获取焦点
      this.$refs.searchInput.focus();
    },
    openHead: function () {
      this.showHead = !this.showHead;
    },
    returnTop: function () {
      window.scrollTo(0, 0);
    },
    userLogin: function () {
      this.showLogin = true;
    },
    userLogout: function () {
      deleteUserAccessToken(getCookie("token"));
      delCookie("token");
      let url = window.parent.location.href;
      let haveToken = url.indexOf("?token")
      if (haveToken != -1) {
        let list = url.split("?token");
        this.isLogin = false;
        window.location.href = list[0]
        let userInfo = {};
        this.setUserInfo(userInfo)
      } else {
        window.location.reload()
      }

    },

    // 点击头像触发的动作
    handleCommand(command) {
      switch (command) {
        case "logout" : {
          this.userLogout();
        };break;
        case "login" : {
          this.userLogin();
        };break;
        case "goUserInfo" : {
          // 打开抽屉
          this.drawer = true;
          // 获取评论列表
          this.getCommentList();
          // 获取点赞列表
          this.getPraiseList()
          // 获取反馈列表
          this.getFeedback()
        } break;
      }
    },
    closeLoginBox: function () {
      this.showLogin = false;
    },
    // 获取浏览器类型
    getBrowser() {
      let sBrowser, sUsrAg = navigator.userAgent;
      if (sUsrAg.indexOf("Firefox") > -1) {
        sBrowser = "Mozilla Firefox";
        this.browserFlag = 2;
        // "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
      } else if (sUsrAg.indexOf("Chrome") > -1) {
        sBrowser = "Google Chrome or Chromium";
        this.browserFlag = 1;
        // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
      }

    },
  }
};
</script>

<style>
@import "../assets/css/emoji.css";
.emoji-panel-btn:hover {
  cursor: pointer;
  opacity: 0.8;
}
.emoji-item-common {
  background: url("../assets/img/emoji_sprite.png");
  display: inline-block;
  zoom: 0.3;
}
.emoji-item-common:hover {
  cursor: pointer;
}
.emoji-size-small {
// 表情大小
zoom: 0.3;
}
</style>

<style scoped>
.el-tag {
  height: 25px;
  line-height: 25px;
  margin-left: 6px;
}
#starlist li .title {
  color: #00a7eb;
}
.userInfoAvatar {
  width: 35px;
  height: 35px;
  position: absolute;
  right: -77px;
}

.userInfoAvatar img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

@media only screen and (max-width: 1300px) {
  .userInfoAvatar {
    width: 35px;
    height: 35px;
    position: absolute;
    right: 10px;
    top: 0px;
  }

  .searchbox {
    position: absolute;
    right: 50px;
    top: 0
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  margin: 0, 0, 0, 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.imgBody {
  width: 100px;
  height: 100px;
  border: solid 2px #ffffff;
  float: left;
  position: relative;
}
.imgBody img {
  width: 100px;
  height: 100px;
}
.uploadImgBody {
  margin-left: 5px;
  width: 100px;
  height: 100px;
  border: dashed 1px #c0c0c0;
  float: left;
  position: relative;
}
.uploadImgBody :hover {
  border: dashed 1px #00ccff;
}
.inputClass {
  position: absolute;
}

.commentList {
  width: 100%;
  margin: 0 auto;
}
.commentList .p1 {
  float: left;
}
.commentList .left {
  display: inline-block;
  width: 10%;
  height: 100%;
}
.commentList .left img {
  margin: 0 auto;
  width: 100%;
  border-radius: 50%;
}
.commentList .right {
  display: inline-block;
  width: 85%;
  margin-left: 5px;
}
.commentList .rightTop {
  height: 30px;
}
.commentList .rightTop .userName {
  color: #303133;
  margin-left: 10px;
  font-size: 16px;
  font-weight: bold;
}
.commentList .rightTop .timeAgo {
  color: #909399;
  margin-left: 10px;
  font-size: 15px;
}
.commentList .rightCenter {
  margin-left: 20px;
  line-height: 30px;
  min-height: 60px;
}

.commentList .rightBottom el-link {

}

.feedbackCard .item .title {
  display: inline-block;
  width: 70px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: bold;
}
.feedbackCard .item .content {
  display: inline-block;
  width: 240px;
  margin-bottom: 5px;
}

.search_ico2 { width: 60px; height: 60px; display: block; position: absolute; right: 0; top: 15px; padding: 0; margin: 0; line-height: 60px; cursor: pointer; }
</style>
